<template>
  <div class="device-detail-base">
    <div
      class="device-detail-base-header"
      style="display: flex; align-items: center"
    >
      <div class="list">
        <div class="left">
          <img class="img" :src="dataInfo.pic" alt="">
          <div class="nav">
            <div class="text1">{{ dataInfo.username }}<span>{{ dataInfo.roleName }}</span></div>
            <div class="text2">
              <i class="iconfont iconxiangmu"></i>
              <el-progress :percentage="dataInfo.pParentNum / dataInfo.totalProjectNum * 100" :show-text="false" style="width: 300px" :stroke-width="10" color="#1861FD"></el-progress>
              <div class="text2_2">{{ dataInfo.pParentNum }}</div>
              <div class="text2_3">个</div>
            </div>
            <div class="text3">
              <i class="iconfont icongongsi"></i>
              <div>{{ dataInfo.company_name }}</div>
              <i class="iconfont icondianhua1"></i>
              <div>{{ dataInfo.telephone }}</div>
              <i class="iconfont icondizhi1"></i>
              <div style="width: 400px">{{dataInfo.province + dataInfo.city + dataInfo.area + dataInfo.address}}</div>
            </div>
          </div>
        </div>
        <div class="right" style="width: 340px;flex: 0 0 auto">
          <el-button
              type="primary"
              @click="getPermission(dataInfo.id)"
              v-if="operationList.includes('permissionEdit')"
              style="box-shadow: 0px 5px 12px 0px rgba(24, 97, 253, 0.43);background: #1861FD;">分配权限</el-button>
          <el-button
              @click="doUpMsg"
              v-if="operationList.includes('edit')"
              style="border: 1px solid #1861FD;color: #1861FD">编辑</el-button>
          <el-button
              @click="delUser"
              v-if="operationList.includes('del')"
              style="border: 1px solid #1861FD;color: #1861FD">删除</el-button>
          <el-button
              @click="goBack"
              v-if="operationList.includes('del')"
              style="border: 1px solid #1861FD;color: #1861FD">返回</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      :title="editDialogForm.title"
      :visible.sync="editDialog"
      center
      width="700px"
      custom-class="global-form-dialog"
    >
      <el-form
        :model="editDialogForm"
        :rules="editDialogRules"
        ref="editDialogRules"
        label-width="120px"
        class="demo-ruleForm"
        autocomplete="off"
      >
        <el-form-item
          label="用户头像："
          prop="pic"
          v-if="editDialogForm.title !== '修改密码'"
        >
            <el-upload
                class="avatar-uploader"
                :multiple="false"
                action="/tanyuan/manager/fileUpload"
                :on-preview="handlePreview"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :data="tokenData"
                :show-file-list="false"
          >
            <img v-if="editDialogForm.pic" :src="editDialogForm.pic" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="用户名称："
          prop="username"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-input
            v-model="editDialogForm.username"
            placeholder="请输入用户名，必须是3-11位之间的汉字、字母、数字、下划线"
            minlength="3"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="角色："
          prop="roleId"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-select
            v-model="editDialogForm.roleId"
            placeholder="请选择"
            clearable
            filterable
            :loading="optionsData.roleLoading"
          >
            <el-option
              v-for="item in optionsData.roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属公司："
          prop="company"
          v-if="
            editDialogForm.title !== '修改密码' &&
            editDialogForm.roleId &&
            editDialogForm.roleId != 1
          "
        >
          <div
            class="global-form-my-select-btn"
            :class="{
              'global-form-my-select-btn-hover': editDialogForm.company,
            }"
            @click="companyEditDialog"
          >
            <el-input
              readonly
              class="global-form-my-select-btn-input"
              @mouseover.native="editEnter"
              @mouseout.native="editLeave"
              :class="{
                'global-form-my-select-btn-input-hover': editCloseColor,
              }"
              clearable
            >
              <template slot="suffix">
                <i
                  class="el-icon-arrow-down global-form-my-select-icon-arrow"
                  @mouseenter="editEnter"
                  v-if="!editCloseIcon"
                ></i>
                <i
                  class="el-icon-circle-close global-form-my-select-icon-close"
                  @mouseenter="editEnter"
                  v-else
                  @click.stop="clearEditCompany"
                ></i>
              </template>
            </el-input>
            <p>
              {{
                editDialogForm.company
                  ? editDialogForm.company.companyName
                  : "请选择"
              }}
            </p>
          </div>
        </el-form-item>

        <el-form-item
          label="手机号："
          prop="telephone"
          v-if="editDialogForm.title !== '修改密码'"
        >
          <el-input
            v-model="editDialogForm.telephone"
            placeholder="请输入"
          ></el-input>
        </el-form-item>


          <el-form-item label="省：" prop="province" v-if="editDialogForm.title !== '修改密码'">
            <el-select
              v-model="editDialogForm.province"
              placeholder="省"
              clearable
              :disabled="!formData.provinceList.length"
              @change="changeProvince"
            >
              <el-option
                v-for="item in formData.provinceList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市：" prop="city" v-if="editDialogForm.title !== '修改密码'">
            <el-select
              v-model="editDialogForm.city"
              placeholder="市"
              clearable
              :disabled="!formData.cityList.length"
              @change="changeCity"
            >
              <el-option
                v-for="item in formData.cityList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区：" prop="area" v-if="editDialogForm.title !== '修改密码'">
            <el-select
              v-model="editDialogForm.area"
              placeholder="区"
              clearable
              :disabled="!formData.districtList.length"
            >
              <el-option
                v-for="item in formData.districtList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="详细地址：" prop="address" v-if="editDialogForm.title !== '修改密码'">
          <el-input id="tipinput" v-model="editDialogForm.address"></el-input>
        </el-form-item>

        <el-form-item
          label="密码："
          prop="password"
          v-if="editDialogForm.title !== '编辑用户'"
        >
          <el-input
            v-model="editDialogForm.password"
            placeholder="请输入"
            @focus="changeInputType"
            :type="inputType"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="重复密码："
          prop="checkPassword"
          v-if="editDialogForm.title !== '编辑用户'"
        >
          <el-input
            v-model="editDialogForm.checkPassword"
            placeholder="请输入"
            @focus="changeInputType"
            :type="inputType"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="global-form-dialog-btn">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="permissionDialog"
      center
      width="500px"
      custom-class="permission-dialog"
    >
      <div class="permission-dialog-tree">
        <el-tree
          @check="clickNode"
          :data="treeList"
          ref="tree"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="idList"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <el-button
        class="permission-dialog-btn"
        type="primary"
        @click="getCheckedKeys"
        >保存</el-button
      >
    </el-dialog>

    <el-dialog
      title="选择公司"
      :visible.sync="optionsData.companyDialog"
      center
      width="1250px"
    >
      <company-dialog
        @change="changeCompany"
        :company-data="companyData"
        v-if="optionsData.companyDialog"
      ></company-dialog>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api/apiCompanyUser";

export default {
  name: "DeviceDetailBase",
  props: {
    currentItem: Object,
    operationList: Array,
  },
  components: {},
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入用户名"));
      } else if (
        !/^[a-zA-Z0-9_\u4e00-\u9fa5]{3,11}$/.test(this.editDialogForm.username)
      ) {
        callback(new Error("输入用户名需限制在3-11位(大小写字母、数字、中文)"));
      } else {
        callback();
      }
    };
    const validateTelephone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (!/^\d{11}$/.test(this.editDialogForm.telephone)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else if (!/^[0-9A-Za-z]{6,18}$/.test(this.editDialogForm.password)) {
        callback(new Error("输入用户名需限制在6-18位且没有中文"));
      } else {
        if (this.editDialogForm.checkPassword) {
          this.$refs.editDialogRules.validateField("checkPassword");
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.editDialogForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
        permissionDialog: false,
        permissionList: [],
        treeList: [],
        idList: [],
        defaultProps: {
            children: "children",
            label: "label",
        },
        editDialog: false, // 编辑弹窗
        editCloseIcon: false, // close展示
        editCloseColor: false, // close展示
        // 下拉框列表
        optionsData: {
            companyDialogType: null, // 1 - 筛选弹窗 2 - 编辑弹窗
            companyDialog: false,
            roleLoading: true,
            roleList: [],
        },
        // 编辑弹窗表单
        editDialogForm: {
            title: "新增用户",
            userId: null,
            username: null,
            telephone: null,
            company: null,
            password: null,
            checkPassword: null,
            roleId: null,
            pic: "https://abc.landseabespoke.com/pic.svg",
            address: '',
            province: '',
            city: '',
            area: '',
        },
        editDialogRules: {
            // 编辑弹窗表单验证
            telephone: [
            { required: true, validator: validateTelephone, trigger: "blur" },
            ],
            username: [
            { required: true, validator: validateUsername, trigger: "blur" },
            ],
            company: [{ required: true, message: "请选择公司", trigger: "change" }],
            password: [
            { required: true, validator: validatePass, trigger: "blur" },
            ],
            checkPassword: [
            { required: true, validator: validatePass2, trigger: "blur" },
            ],
            roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
        },
        tokenData: {
            token: "",
        },
        headPic: '',
        province: [],
        formData: {
            provinceList: [],
            cityList: [],
            districtList: [],
        },
        inputType: "text", // 含有密码输入框时需要

        dataInfo: null,
    };
  },
  mounted() {
  },
  activated() {
    this.tokenData.token = this.$store.state.token;
    this.dataInfo = this.currentItem;
    this.getPost();
  },
  created() {
    this.dataInfo = this.currentItem;
    this.getPost();
  },
  methods: {
    getPost() {
      let params = {
        token: this.$store.state.token,
        userId: this.dataInfo.id,
      }
      API.normal_user_detail(params).then((res) => {
          if (res.key === 1000) {
            this.dataInfo = res.result.data;
          }
        });
    },
    // 删除接口
    handleStatus(ids, status) {
      // status 1-启用 2-禁用 3-删除
      let title;
      if (status === 1) {
        title = "启用";
      } else if (status === 2) {
        title = "禁用";
      } else if (status === 3) {
        title = "删除";
      }
      this.$confirm("此操作将" + title + "该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$bus.$emit("show-loading", true);
        const params = {
          token: this.$store.state.token,
          status,
        };
        params.userIds = ids.join(",");
        API.status_normal(params).then((res) => {
          if (res.key === 1000) {
            this.$message({
              type: "success",
              message: title + "成功",
            });
            this.$emit("goBackOne")
          }
          this.$bus.$emit("show-loading", false);
        });
      });
    },
      delUser(){
        const ids = [this.dataInfo.id];
        this.handleStatus(ids, 3);
      },
    getRoleList() {
      const params = {
        token: this.$store.state.token,
      };
      API.getAllRoleList(params).then((res) => {
        if (res.key === 1000) {
          this.optionsData.roleLoading = false;
          this.optionsData.roleList = res.result.list;
        }
      });
    },
      goBack(){
          this.$emit("goBackOne")
      },
    editLeave() {
      this.editCloseIcon = false;
      this.editCloseColor = false;
    },
    editEnter() {
      if (this.editDialogForm.company) {
        this.editCloseIcon = true;
        this.editCloseColor = true;
      }
    },
    clearSearchCompany() {
      // 清除搜索栏公司信息
      this.searchForm.company = null;
    },
    clearEditCompany() {
      // 清除编辑弹窗
      this.editDialogForm.company = null;
      this.editCloseColor = false;
      this.$refs.editDialogRules.validateField("company");
    },
    companySearchDialog() {
      // 打开搜索栏弹窗
      this.companyData = this.searchForm.company;
      this.optionsData.companyDialogType = 1;
      this.optionsData.companyDialog = true;
    },
    companyEditDialog() {
      // 打开编辑弹窗
      this.companyData = this.editDialogForm.company;
      this.optionsData.companyDialogType = 2;
      this.optionsData.companyDialog = true;
    },
    changeCompany(company) {
      if (this.optionsData.companyDialogType === 1) {
        this.optionsData.companyDialog = false;
        this.searchForm.company = company;
      } else if (this.optionsData.companyDialogType === 2) {
        this.optionsData.companyDialog = false;
        this.editDialogForm.company = company;
        this.$refs.editDialogRules.validateField("company");
      }
    },
      doUpMsg(){
          let row = this.dataInfo
        // this.editDialogForm = {
        //   title: "编辑用户",
        //   userId: row.id,
        //   username: row.username,
        //   telephone: row.telephone,
        //   company: {
        //     companyName: row.company_name,
        //     id: row.company_id,
        //   },
        //   roleId: row.user_type,
        //   address: row.address,
        //   province: row.province,
        //   city: row.city,
        //   area: row.area,
        //   pic: row.pic
        // };
        // this.getProvince()
        // this.getCity()
        // this.getDistrict()
        // this.getRoleList()
        // this.editDialog = true;


        this.$router.push({
          path: '/EditCompanyUser',
          query: {
            row: JSON.stringify(row)
          }
        })
      },
    // 防止密码自动输入
    changeInputType() {
      this.inputType = "password";
    },
    changeProvince() {
      if(this.editDialogForm.city){
        this.editDialogForm.city = null
      }
      if(this.editDialogForm.area){
        this.editDialogForm.area = null
      }
      this.formData.cityList = [];
      this.formData.districtList = [];
      this.getCity();
    },
    changeCity() {
      if(this.editDialogForm.area){
        this.editDialogForm.area = null
      }
      this.formData.districtList = [];
      this.getDistrict();
    },
    getProvince() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
      };
      API.get_province(params).then((res) => {
        if (res.key === 1000) {
          res = res.result.list;
          this.formData.provinceList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getCity() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        province: this.editDialogForm.province,
      };
      API.get_city(params).then((res) => {
        if (res.key === 1000) {
          res = res.result.list;
          this.formData.cityList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getDistrict() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        province: this.editDialogForm.province,
        city: this.editDialogForm.city,
      };
      API.get_district(params).then((res) => {
        if (res.key === 1000) {
          res = res.result.list;
          this.formData.districtList = res;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    handleRemove(file, fileList) {
      console.log(file,fileList)
    },
    handleAvatarSuccess: function(e) {
      if(e.key == 1000){
        this.editDialogForm.pic = e.result.data.path;
        // this.headPic = e.result.data.path;
        this.$message.success({
          showClose: true,
          message: "上传成功",
          duration: 1500
        });
      }
    },
    handlePreview(file) {
      console.log(file)
    },
    // 编辑用户信息接口
    handleConfirm() {
      this.$refs.editDialogRules.validate((valid) => {
        if (!valid) return;
        if (this.editDialogForm.title === "修改密码") {
          if (!this.editDialogForm.userId) {
            this.$message({
              type: "success",
              message: "操作失败，请刷新页面后重试",
            });
          }
        } else {
          this.handleEdit();
        }
      });
    },
    handleEdit() {
      this.$bus.$emit("show-loading", true);
      const params = this.editDialogForm
      params.token = this.$store.state.token
      params.realname = params.username
      if (this.editDialogForm.userId) {
        params.id = this.editDialogForm.userId;
      } else {
        params.password = this.editDialogForm.password;
      }
      if (this.editDialogForm.company && this.editDialogForm.company.id) {
        params.companyId = this.editDialogForm.company.id;
      }
      API.add_normal_user(params).then((res) => {
        if (res.key === 1000) {
          if (this.editDialogForm.userId) {
            this.$message({
              type: "success",
              message: "编辑用户成功",
            });
          } else {
            this.$message({
              type: "success",
              message: "新增用户成功",
            });
          }
          this.dataInfo.username = params.realname
          this.dataInfo.pic = params.pic
          this.dataInfo.telephone = params.telephone
          this.dataInfo.province = params.province
          this.dataInfo.city = params.city
          this.dataInfo.area = params.area
          this.dataInfo.address = params.address
          if(params.company && params.company.companyName){
              this.dataInfo.company_name = params.company.companyName
          }
          if(params.company && params.company.id){
              this.dataInfo.company_name = params.company.companyName
          }
          if(params.roleId == 1){
              this.dataInfo.user_type = 1
          }else{
              this.dataInfo.user_type = 10
          }
          this.optionsData.roleList.forEach(item => {
              if(item.id == params.roleId){
                  this.dataInfo.roleName = item.roleName
              }
          })
          this.editDialog = false;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    // 获取权限列表
    getPermission(id) {
      this.$router.push({
        path: '/upCompanyUser',
        query: {
          id: id
        }
      })
    },
    getCheckedKeys() {
      const idList = this.$refs.tree.getCheckedKeys();
      const params = {
        token: this.$store.state.token,
        userId: this.dataInfo.id,
        powerIds: JSON.stringify(idList.filter((item) => item[0] !== "x")),
      };
      API.upPermission(params).then((res) => {
        if (res.key === 1000) {
          this.permissionDialog = false;
          this.$message({
            type: "success",
            message: "分配成功",
          });
        }
      });
    },
    clickNode(node, { checkedKeys }) {
      let currentId = node.id;
      if (currentId[0] === "x") return; // 选中父级 无需操作
      let parentItem;
      this.treeList.some((firstItem) => {
        if (!firstItem.children) return false;
        // if (firstItem.children[0] === currentId) return true;
        return firstItem.children.some((secondItem) => {
          if (secondItem.id === currentId) {
            parentItem = firstItem;
            return true;
          }
          return false;
        });
      });
      if (parentItem) {
        if (parentItem.children[0].id === currentId) {
          const idList = checkedKeys;
          if (!checkedKeys.includes(currentId)) {
            parentItem.children.forEach((item) => {
              let index = idList.indexOf(item.id);
              if (index > -1) {
                idList.splice(index, 1);
              }
            });
            this.$refs.tree.setCheckedKeys(idList);
          }
        } else {
          if (checkedKeys.includes(currentId)) {
            const idList = checkedKeys;
            idList.push(parentItem.children[0].id);
            this.$refs.tree.setCheckedKeys(idList);
          } else {
            const idList = checkedKeys;
            let bol = parentItem.children.some((item) =>
              idList.includes(item.id)
            );
            if (!bol) {
              let index = idList.indexOf(parentItem.id);
              if (index > -1) {
                idList.splice(index, 1);
                this.$refs.tree.setCheckedKeys(idList);
              }
            }
          }
        }
      }
    },
    formatterTime(time) {
      if (time) {
        return this.$moment(new Date(Number(time))).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "-";
      }
    },
  },
};
</script>

<style lang="sass" scoped>
.list
  background: #FFFFFF
  box-shadow: 0px 0px 10px 0px rgba(93, 139, 198, 0.05)
  border-radius: 14px
  margin-bottom: 15px
  width: 100%
  display: flex
  align-items: center
  justify-content: space-between
  padding: 19px 24px
  .left
    display: flex
    align-items: center
    .img
      width: 110px
      height: 110px
      border-radius: 4px
      margin-right: 17px
    .nav
      .text1
        font-size: 20px
        font-weight: bold
        color: #222222
        line-height: 26px
        display: flex
        align-items: center
        justify-content: flex-start
        margin-bottom: 16px
        span
          height: 16px
          background: #FFF8ED
          border-radius: 11px
          border: 1px solid #FF9901
          font-size: 12px
          color: #FF9901
          line-height: 16px
          padding: 0 8px
          display: block
          text-align: center
          margin-left: 11px
      .text2
        display: flex
        align-items: center
        justify-content: flex-start
        margin-bottom: 25px
        i
          font-size: 20px
          color: #1861FD
          margin-right: 7px
        .text2_1
          font-size: 14px
          color: #222222
          line-height: 19px
          margin-right: 7px
        .text2_2
          margin-left: 5px
          font-size: 23px
          font-weight: bold
          color: #222222
          line-height: 29px
          margin-right: 3px
        .text2_3
          font-size: 14px
          color: #B5B5C3
          line-height: 19px
      .text3
        display: flex
        align-items: center
        i
          font-size: 14px
          color: #B5B5C3
          margin-right: 5px
        div
          width: 128px
          font-size: 14px
          color: #B5B5C3
          line-height: 19px
  .right
.device-detail-base
  @include container
  margin-bottom: 20px
  background-color: white
  flex: none !important
  color: black
  ::v-deep .permission-dialog
    .el-dialog__body
      display: flex
      align-items: center
      flex-direction: column
      padding: 30px 60px
      .permission-dialog-tree
        width: 100%
        max-height: 450px
        overflow-y: auto
        overflow-x: hidden
        margin-bottom: 40px
  .top-container
    width: calc(100% - 40px)
    margin: 0 auto 30px
    .list
      // background: #FAFAFA
      display: flex
      flex-wrap: wrap
      //margin-right: -50px
      padding-top: 40px
      padding-bottom: 24px
      .item
        display: flex
        margin-bottom: 16px
        //margin-right: 50px
        .item-title
          width: 140px
          text-align: right
          color: #A5A5A5
          flex: 0 0 auto
        .item-desc
          flex: 1
          width: 200px
          @include no-wrap(1)
          //display: flex
          justify-content: flex-start
          align-items: center
          .item-radio
            width: 8px
            height: 8px
            border-radius: 50%
            margin-right: 5px
            &.item-radio-color2
              background: #40E867
            &.item-radio-color1
              background: #409FFF
            &.item-radio-color5
              background: #E9B84C
            &.item-radio-color4
              background: #F01E1E
            &.item-radio-color3
              background: #909399
            &.item-radio-color6
              background: #909399
  .bottom-container
    display: flex
    align-items: center
    flex-wrap: wrap
    margin-bottom: 20px
    .control-list
      display: flex
      align-items: center
      margin-right: 130px
      .control-item
        margin-right: 30px
        cursor: pointer
        &:last-child
          margin-right: 0
        .control-item-round
          transition: all .3s
          margin-bottom: 10px
          width: 70px
          height: 70px
          border-radius: 50%
          border: 1px solid #c8c8c8
          display: flex
          align-items: center
          justify-content: center
          background-image: linear-gradient(#eee, #d8d8d8)
          box-shadow: 0 0 9px rgba(0, 0, 0, 0.1)
          .control-item-icon
            width: 70px
            height: 70px
            background: center/cover no-repeat
            &.control-item-icon1
              background-image: url(~images/edit_control1.png)
            &.control-item-icon2
              background-image: url(~images/edit_control2.png)
            &.control-item-icon3
              background-image: url(~images/edit_control3.png)
            &.control-item-icon4
              background-image: url(~images/edit_control4.png)
            &.control-item-icon5
              background-image: url(~images/edit_control5.png)
            &.control-item-icon6
              background-image: url(~images/edit_control6.png)
            &.control-item-icon7
              background-image: url(~images/edit_control7.png)
            &.control-item-icon8
              background-image: url(~images/edit_control8.png)
            &.control-item-icon9
              background-image: url(~images/edit_control9.png)
            &.control-item-icon10
              background-image: url(~images/edit_control10.png)
        .control-item-text
          line-height: 20px
          text-align: center
        &:hover
          .control-item-round
            background-image: linear-gradient(#74CDFF, #409FFF)
          .control-item-icon
            &.control-item-icon1
              background-image: url(~images/edit_control1_active.png)
            &.control-item-icon2
              background-image: url(~images/edit_control2_active.png)
            &.control-item-icon3
              background-image: url(~images/edit_control3_active.png)
            &.control-item-icon4
              background-image: url(~images/edit_control4_active.png)
            &.control-item-icon5
              background-image: url(~images/edit_control5_active.png)
            &.control-item-icon6
              background-image: url(~images/edit_control6_active.png)
            &.control-item-icon7
              background-image: url(~images/edit_control7_active.png)
            &.control-item-icon8
              background-image: url(~images/edit_control8_active.png)
            &.control-item-icon9
              background-image: url(~images/edit_control9_active.png)
            &.control-item-icon10
              background-image: url(~images/edit_control10_active.png)
        &.active
          .control-item-round
            background-image: linear-gradient(#74CDFF, #409FFF)
          .control-item-icon
            &.control-item-icon1
              background-image: url(~images/edit_control1_active.png)
            &.control-item-icon2
              background-image: url(~images/edit_control2_active.png)
            &.control-item-icon3
              background-image: url(~images/edit_control3_active.png)
            &.control-item-icon4
              background-image: url(~images/edit_control4_active.png)
            &.control-item-icon5
              background-image: url(~images/edit_control5_active.png)
            &.control-item-icon6
              background-image: url(~images/edit_control6_active.png)
            &.control-item-icon7
              background-image: url(~images/edit_control7_active.png)
            &.control-item-icon8
              background-image: url(~images/edit_control8_active.png)
            &.control-item-icon9
              background-image: url(~images/edit_control9_active.png)
            &.control-item-icon10
              background-image: url(~images/edit_control10_active.png)
    .ewm
      margin-left: 20px
      .ewm-pic
        width: 100px
        height: 100px
        margin-bottom: 20px
        border-radius: 4px
      .ewm-text
        font-weight: 700
        text-align: center
  .time-btn
    margin-left: 20px

.detail-title
  display: flex
  flex-direction: row
  align-items: center
  flex-wrap: nowrap
  margin: 20px 0px 0px 20px
.global-table-device-status
  margin-left: 10px
  height: 24px
  width: 80px
  line-height: 24px
  color: #ffffff
  text-align: center
  border-radius: 4px
  &.green
    background: #5BC618
  &.blue
    background: #057DF6
  &.orange
    background: #F3AA09
  &.red
    background: #EF4242
  &.gray
    background: #909399
</style>
